<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新疆行知书</title>
<style>
	body{
		margin:0px;
		background-color:#2286C6;
	}
	ul{
		margin: 0px;
		padding: 0px;		/*默认ul，有内和外间距*/
		list-style: none;
	}
	/*分类的标题（多个共用）*/
	.tTile{
		color: #003973;
		display: block;
		font-weight: bold;
		font-size: 12px;
		padding: 5px 20px;
		background: url(img/icon2.gif) no-repeat 8px #BBDDFF;
	}
	#divContainer{ 
		width:780px; 
		/*margin-left:auto;*/		/*外间距：左*/
		/*margin-right:auto;*/		/*外间距：右*/
		margin:auto;					/*外间距（所有）：*/
		/*background-color:#000;*/	/*测试用*/
		/*height:800px;*/			/*测试用*/
	}
	
	#divHeader{
		height:183px;			/*横副图片和导航按钮高度之和（150+33）*/
		
		background-color:#960;	/*测试用*/
		
	}
		#divHeader ul{
			
			overflow: auto;		/*本例并不实际效果。（由于li浮动了，背景色无效（设置了就有效果））*/
			background-color:#f00;	/*测试用*/
		}
		#divHeader ul li{
			float: left;
		}
		#divHeader ul li a{
			width: 78px;
			height: 33px;
			display: block;		/*将a的显示方式修改为块级（默认为行内，宽高设置无效）*/
			text-align: center;		/*水平居中*/
			line-height: 33px;		/*垂直居中*/
			background-image: url(img/button1.jpg);	/*背景图片*/
			font-size: 12px;
			color: #004A87;
			font-family:"微软雅黑";
			
		}
		/*鼠标悬停*/
		#divHeader ul li a:hover{
			background-image: url(img/button1_bg.jpg);
			color: #fff;
		}
	#divBody{
		/*margin-bottom:1px;*/	/*外间距：下*/
		/*margin-top:1px;*/		/*外间距：上*/
		margin:1px 0px;		/*margin：上下间距 左右间距*/
		/*margin:10px 0px 10px 0px;*/	/*margin：上 右 下 左*/
		overflow: auto;	
	}
	
	#divBody #divBody_Left{
		float:left;				/*左浮动*/
		/*border-style:solid;*/		/*边框线条：solid实线*/
		/*border-width:5px;*/		/*边框线条粗细*/
		/*border-color:#FFF;*/		/*边框颜色*/
		border:solid 5px #fff;	/*以上三合一*/
		width:190px;
		background-color: #5EA6EB;
	
	}
		#divBody #divBody_Left #divWeather{
			
		}
			#divBody #divBody_Left #divWeather #divWeatherText{
				background-image: url(img/weather.jpg);
				height: 42px;
				color: #fff;
				font-weight: bold;
				font-size: 12px;
				/*text-align: center;
				line-height: 42px;*/
				position: relative;	/*当对本元素中的子元素(b)，设置绝对定位时，以当前元素为准*/
			}
			#divBody #divBody_Left #divWeather #divWeatherText b{
				top: 16px;
				left: 80px;
				position: absolute;	/*设置定位为绝对定位（top和left起作用）(如果父元素未设置为相对定位，那么就以body为准)*/
			}
			
			#divBody #divBody_Left #divWeather ul{
				padding: 10px;	/*空白区域*/
			}
			#divBody #divBody_Left #divWeather ul li{
				font-size: 12px;
				color: #fff;
				font-family:"微软雅黑";
				margin: 5px 0px;
				
				/*background-image: url(img/icon1.gif);*/
				/*background-repeat:no-repeat;*/		/*背景图片不平铺*/
				/*background-position:left ;*/     /*背景图片的位置*/
				background: url(img/icon1.gif) no-repeat left;
				padding-left: 10px;
				
			}
		#divBody #divBody_Left #divTuijian{
			
		}
		#divBody #divBody_Left #divTuijian ul{
			padding: 5px 9px 10px 9px;
			text-align: center;
		}
		#divBody #divBody_Left #divTuijian ul li{ }
		#divBody #divBody_Left #divTuijian ul li img{ 
			margin-top: 5px;
			border: solid 1px #fff; 
		}
		#divBody #divBody_Left #divTuijian ul li a{
			text-decoration: none;	/*去掉下划线*/
			font-size: 12px;
			color: #fff;
		}
	#divBody #divBody_Center{
		float:left;				/*左浮动*/
		margin:0px 1px;
		border:solid 5px #fff;	
		width:390px;
		background-color:#f0F;	/*测试用*/
		height:490px;			/*测试用*/
	}
	#divBody #divBody_Right{
		float:left;
		border:solid 5px #fff;	
		width:168px;
		background-color:#000;	/*测试用*/
		height:490px;			/*测试用*/
	}
	
	#divFooter{
		background-color:#fc0;	/*测试用*/
		height:20px;			/*测试用*/
	}

</style>
</head>

<body>
	<!--divContainer布局容器-->
	<div id="divContainer">
    	<div id="divHeader">
    		<img src="img/banner.jpg"/>
    		<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">新疆简介</a></li>
				<li><a href="#">风土人情</a></li>
				<li><a href="#">吃在新疆</a></li>
				<li><a href="#">路线选择</a></li>
				<li><a href="#">自助行</a></li>
				<li><a href="#">摄影摄像</a></li>
				<li><a href="#">游记精选</a></li>
				<li><a href="#">资源下载</a></li>
				<li><a href="#">雁过留声</a></li>
			</ul>
    	</div>
        <div id="divBody">
        	<div id="divBody_Left">
        		<div id="divWeather">
        			<div id="divWeatherText"><b>天气预报</b></div>
        			<ul>
						<li>乌鲁木齐&nbsp;&nbsp;&nbsp;雷阵雨 20℃-31℃</li>
						<li>吐鲁番&nbsp;&nbsp;&nbsp;多云转阴 20℃-28℃</li>
						<li>喀什&nbsp;&nbsp;&nbsp;阵雨转多云 25℃-32℃</li>
						<li>库尔勒&nbsp;&nbsp;&nbsp;阵雨转阴 21℃-28℃</li>
						<li>克拉马依&nbsp;&nbsp;&nbsp;雷阵雨 26℃-30℃</li>
					</ul>
        		</div>
        		<div id="divTuijian">
        			<span class="tTile">今日推荐</span>
        			<ul>
						<li><a href="#"><img src="img/tuijian1.jpg"></a></li>
						<li><a href="#">喀纳斯河</a></li>
						<li><a href="#"><img src="img/tuijian2.jpg"></a></li>
						<li><a href="#">布尔津</a></li>
						<li><a href="#"><img src="img/tuijian3.jpg"></a></li>
						<li><a href="#">天山之路</a></li>
					</ul>
        		</div>
        	</div>
        	
            <div id="divBody_Center"></div>
            <div id="divBody_Right"></div>	
        </div>
        <div id="divFooter"></div>
    </div>
</body>
</html>
